<template>
	<view>
		<fa-navbar title="报名"></fa-navbar>
		<view class="top" :style="{'background':theme.bgColor}"></view>
		<view class="content">
			<view class="cm">
				<view class="form">
					<view class="title">
						个人信息
					</view>
					<u-form ref="uForm" labelWidth="120" :labelStyle="{'font-size':'30rpx','color':'#333333'}">
						<u-form-item label="姓名" prop="username" borderBottom>
							<u-input v-model="form.username" border="none" placeholder="请填写姓名"></u-input>
						</u-form-item>
						<u-form-item label="手机号" prop="mobile">
							<u-input v-model="form.mobile" border="none" placeholder="请填写手机号"></u-input>
						</u-form-item>
					</u-form>
				</view>
				<view class="other-info">
					<view class="title">证件信息</view>
					<view class="u-demo-block">
						<text class="u-demo-block__title">身份证</text>
						<view class="u-demo-block__content">
							<view class="u-page__upload-item">
								<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" 
									multiple name="1" :maxCount="1" width="302" height="231">
									<image src="../../static/idcard.png" mode="widthFix"
										style="width: 302rpx;height: 231rpx;"></image>
									<view class="title">身份证正面照</view>
								</u-upload>
								<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic2" 
									multiple name="2"  :maxCount="1" width="302" height="231">
									<image src="../../static/idcard2.png" mode="widthFix"
										style="width: 302rpx;height: 231rpx;"></image>
									<view class="title">身份证背面照</view>
								</u-upload>
							</view>
						</view>
					</view>
					<view class="u-demo-block">
						<text class="u-demo-block__title">学历证明</text>
						<view class="u-demo-block__content">
							<view class="u-page__upload-item">
								<u-upload :fileList="fileList3" name="3" @afterRead="afterRead" @delete="deletePic3"
									multiple :maxCount="1" width="302" height="231">
									<image src="../../static/byz.png" mode="widthFix"
										style="width: 302rpx;height: 231rpx;"></image>
									<view class="title">毕业证上传</view>
								</u-upload>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bm-btm">
				<u-button shape="circle"
					:customStyle="{'background-color':theme.bgColor,'height':'88rpx','line-height':'88rpx','color':'#ffffff'}"
					text="立即报名" @click="submit"></u-button>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					mobile: '',
					idcardfront:"",
					idcardback:"",
					diploma:'',
					classes_id:0,
					remark:''
				},
				fileList1: [],
				fileList2: [],
				fileList3: [],
			};
		},
		onLoad(e) {
			this.form.classes_id = e.classes_id
		},
		methods: {
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				let that = this
				let lists = [].concat(event.file);
				let fileListLen = that[`fileList${event.name}`].length
				lists.map((item) => {
					that[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$api.goUpload({filePath:lists[i].url})
					let item = that[`fileList${event.name}`][fileListLen]
					that[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.url
					}))
					fileListLen++
				}
			},
			submit(){
				if(!this.fileList1.length){
					uni.$u.toast('请上传身份证正面照片');
					return;
				}if(!this.fileList2.length){
					uni.$u.toast('请上传身份证背面照片');
					return;
				}if(!this.fileList3.length){
					uni.$u.toast('请上传毕业证');
					return;
				}
				this.form.idcardfront = this.fileList1[0].url
				this.form.idcardback = this.fileList2[0].url
				this.form.diploma = this.fileList3[0].url
				this.$api.entryClasses(this.form).then((res)=>{
					if(res.code){
						
					}else{
						
					}
					uni.$u.toast(res.msg);
				})
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	.top {
		margin-top: 178rpx;
		height: 116rpx;
	}

	.content {
		padding: 0 24rpx;

		.cm {
			position: absolute;
			top: 188rpx;
			left: 24rpx;
			right: 24rpx;
			z-index: 999;
		}

		.form {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 32rpx;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
			}

			/deep/ .u-form-item__body {
				padding: 32rpx 0;
			}
		}

		.other-info {
			margin-top: 32rpx;
			padding: 32rpx;
			background-color: #ffffff;
			border-radius: 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
			}

			.u-page__upload-item {
				display: flex;
				justify-content: space-between;

				/deep/ .u-upload {
					flex: 0 !important;
				}

				.title {
					margin-top: 16rpx;
					color: #666666;
					font-size: 24rpx;
					text-align: center;
				}
			}

			.u-demo-block {
				&__title {
					display: block;
					font-size: 30rpx;
					color: #333333;
					padding: 32rpx 0;
				}
			}
		}

		.bm-btm {
			position: absolute;
			left: 24rpx;
			right: 24rpx;
			bottom: 60rpx;
			z-index: 999;
		}
	}
</style>